<template>
  <div class='main user-layout-register'>
    <h2><span>注册账号</span></h2>
    <a-form ref='formRegister' :form='form' id='formRegister'>
      <a-form-item>
        <a-input
          size='large'
          type='text'
          :placeholder="'邀请码'"
          v-decorator="['invitationCode', {rules: [{ required: true, message: '邀请码不能为空' }], validateTrigger: ['change', 'blur']}]"
        ></a-input>
      </a-form-item>
      
      <a-form-item>
        <a-input
          size='large'
          type='text'
          :placeholder="'学号'"
          v-decorator="['studentId', {rules: [{ required: true, message: '学号不能为空' }], validateTrigger: ['change', 'blur']}]"
        >
        </a-input>
      </a-form-item>
      
      <a-form-item>
        <a-input
          size='large'
          type='text'
          :placeholder="'姓名'"
          v-decorator="['nickName', {rules: [{ required: true, message: '姓名不能为空' }], validateTrigger: ['change', 'blur']}]"
        >
        </a-input>
      </a-form-item>
      
      <a-form-item>
        <a-input
          size='large'
          type='text'
          :placeholder="'手机号码'"
          v-decorator="['phonenumber', {rules: [{ required: true, message: '手机号码格式不正确' ,pattern: /^1[3456789]\d{9}$/}], validateTrigger: ['change', 'blur']}]"
        >
        </a-input>
      </a-form-item>
      
      <a-form-item>
        <a-input
          size='large'
          type='text'
          :placeholder="'班级(格式 23级软件工程5班)'"
          v-decorator="['clasz', {rules: [{ required: true, message: '班级不能为空' }], validateTrigger: ['change', 'blur']}]"
        >
        </a-input>
      </a-form-item>
      
      <a-form-item>
        <a-input
          size='large'
          type='text'
          :placeholder="'登录账号'"
          v-decorator="['username', {rules: [{ required: true, message: '登录账号不能为空' }], validateTrigger: ['change', 'blur']}]"
        >
        </a-input>
      </a-form-item>
      
      <a-popover
        placement='rightTop'
        :trigger="['focus']"
        :getPopupContainer='(trigger) => trigger.parentElement'
        v-model='state.passwordLevelChecked'>
        <template slot='content'>
          <div :style="{ width: '240px' }">
            <div :class="['user-register', passwordLevelClass]">{{ $t(passwordLevelName) }}</div>
            <a-progress :percent='state.percent' :showInfo='false' :strokeColor=' passwordLevelColor ' />
            <div style='margin-top: 10px;'>
              <span>请至少输入 6 个字符。请不要使用容易被猜到的密码。
              </span>
            </div>
          </div>
        </template>
        
        <a-form-item>
          <a-input-password
            size='large'
            @click='handlePasswordInputClick'
            :placeholder="'请至少输入6个字符(请不要使用容易被猜到的密码)'"
            v-decorator="['password', {rules: [{ required: true, message: '请输入密码！' }, { validator: this.handlePasswordLevel }], validateTrigger: ['change', 'blur']}]"
          ></a-input-password>
        </a-form-item>
      </a-popover>
      
      <a-form-item>
        <a-input-password
          size='large'
          :placeholder="'确认密码'"
          v-decorator="['confirmPassword', {rules: [{ required: true, message: '请输入确认密码！' }, { validator: this.handlePasswordCheck }], validateTrigger: ['change', 'blur']}]"
        ></a-input-password>
      </a-form-item>
      
      <a-form-item>
        <a-input size='large'
                 :placeholder="'请输入邮箱号'"
                 v-decorator="['email', {rules: [{ required: true, message: '请输入正确的邮箱号', pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/ } ], validateTrigger: ['change', 'blur'] }]">
        </a-input>
      </a-form-item>
      
      <a-row :gutter='16'>
        <a-col class='gutter-row' :span='16'>
          <a-form-item>
            <a-input size='large' type='text'
                     :placeholder="'请输入验证码'"
                     v-decorator="['captcha', {rules: [{ required: true, message: '请输入验证码' }], validateTrigger: 'blur'}]">
              <a-icon slot='prefix' type='mail' :style="{ color: 'rgba(0,0,0,.25)' }" />
            </a-input>
          </a-form-item>
        </a-col>
        <a-col class='gutter-row' :span='8'>
          <a-button
            class='getCaptcha'
            size='large'
            :disabled='state.smsSendBtn'
            @click.stop.prevent='getCaptcha'
            v-text="!state.smsSendBtn && '获取验证码' ||(state.time+' s')"></a-button>
        </a-col>
      </a-row>
      
      <a-form-item>
        <a-button
          size='large'
          type='primary'
          htmlType='submit'
          class='register-button'
          :loading='registerBtn'
          @click.stop.prevent='handleSubmit'
          :disabled='registerBtn'>进行注册
        </a-button>
        <router-link class='login' :to="{ name: 'login' }">使用已有账户登录</router-link>
      </a-form-item>
    
    </a-form>
  </div>
</template>

<script>
import { getEmailCaptcha, register } from '@/api/login'
import { deviceMixin } from '@/store/device-mixin'
import { scorePassword } from '@/utils/util'

const levelNames = {
  0: '强度：太短',
  1: '强度：低',
  2: '强度：中',
  3: '强度：强'
}
const levelClass = {
  0: 'error',
  1: 'error',
  2: 'warning',
  3: 'success'
}
const levelColor = {
  0: '#ff0000',
  1: '#ff0000',
  2: '#ff7e05',
  3: '#52c41a'
}
export default {
  name: 'Register',
  components: {},
  mixins: [deviceMixin],
  data() {
    return {
      form: this.$form.createForm(this),
      
      state: {
        time: 60,
        level: 0,
        smsSendBtn: false,
        passwordLevel: 0,
        passwordLevelChecked: false,
        percent: 10,
        progressColor: '#FF0000'
      },
      registerBtn: false
    }
  },
  computed: {
    passwordLevelClass() {
      return levelClass[this.state.passwordLevel]
    },
    passwordLevelName() {
      return levelNames[this.state.passwordLevel]
    },
    passwordLevelColor() {
      return levelColor[this.state.passwordLevel]
    }
  },
  methods: {
    handlePasswordLevel(rule, value, callback) {
      if (!value) {
        return callback()
      }
      
      if (value.length >= 6) {
        if (scorePassword(value) >= 30) {
          this.state.level = 1
        }
        if (scorePassword(value) >= 60) {
          this.state.level = 2
        }
        if (scorePassword(value) >= 80) {
          this.state.level = 3
        }
      } else {
        this.state.level = 0
        callback(new Error('密码强度不够'))
      }
      this.state.passwordLevel = this.state.level
      this.state.percent = this.state.level * 33
      
      callback()
    },
    
    handlePasswordCheck(rule, value, callback) {
      const password = this.form.getFieldValue('password')
      if (value === undefined) {
        callback(new Error('请输入密码！'))
      }
      if (value && password && value.trim() !== password.trim()) {
        callback(new Error('两次输入的密码不匹配!'))
      }
      callback()
    },
    
    handlePasswordInputClick() {
      if (!this.isMobile) {
        this.state.passwordLevelChecked = true
        return
      }
      this.state.passwordLevelChecked = false
    },
    
    handleSubmit() {
      const { form: { validateFields }, state, $router } = this
      validateFields({ force: true }, (err, values) => {
        if (!err) {
          console.log('表单内容', values)
          register(values).then(() => {
            this.$message.success('注册成功')
            state.passwordLevelChecked = false
            $router.push({ name: 'registerResult', params: { ...values } })
          })
        }
      })
    },
    
    getCaptcha(e) {
      e.preventDefault()
      const { form: { validateFields }, state, $message, $notification } = this
      
      validateFields(['email'], { force: true },
        (err, values) => {
          if (!err) {
            state.smsSendBtn = true
            
            const interval = window.setInterval(() => {
              if (state.time-- <= 0) {
                state.time = 60
                state.smsSendBtn = false
                window.clearInterval(interval)
              }
            }, 1000)
            
            const hide = $message.loading('验证码发送中..', 0)
            // 获取验证码
            getEmailCaptcha({ email: values.email }).then(() => {
              setTimeout(hide, 2500)
              $notification['success']({
                message: '提示',
                description: '验证码获取成功',
                duration: 8
              })
            }).catch(() => {
              setTimeout(hide, 1)
              clearInterval(interval)
              state.time = 60
              state.smsSendBtn = false
              this.requestFailed(err)
            })
          }
        }
      )
    },
    requestFailed(err) {
      this.$notification['error']({
        message: '错误',
        description: ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试',
        duration: 4
      })
      this.registerBtn = false
    }
  },
  watch: {
    'state.passwordLevel'(val) {
    
    }
  }
}
</script>
<style lang='less'>
.user-register {
  
  &.error {
    color: #ff0000;
  }
  
  &.warning {
    color: #ff7e05;
  }
  
  &.success {
    color: #52c41a;
  }
  
}

.user-layout-register {
  .ant-input-group-addon:first-child {
    background-color: #fff;
  }
}
</style>
<style lang='less' scoped>
.user-layout-register {
  
  & > h3 {
    font-size: 16px;
    margin-bottom: 20px;
  }
  
  .getCaptcha {
    display: block;
    width: 100%;
    height: 40px;
  }
  
  .register-button {
    width: 50%;
  }
  
  .login {
    float: right;
    line-height: 40px;
  }
}
</style>
